<%--
  Created by IntelliJ IDEA.
  User: A
  Date: 2021/10/15
  Time: 21:20
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>搜索</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/search.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/res/layui/css/layui.css" media="all">
    <script src="${pageContext.request.contextPath}/res/layui/layui.js" charset="utf-8"></script>
    <script src="${pageContext.request.contextPath}/res/jquery/jquery-3.5.1.min.js" rel="stylesheet"></script>

    <style>
        .layui-laypage-default {
            margin-left: 380px;
            margin-top: 40px;
        }

        .layui-laypage .layui-laypage-curr .layui-laypage-em {
            background-color: #5f5d5d;
        }
    </style>
</head>
<body>


<div class="bg">
    <!--最上面的导航-->
    <jsp:include page="../common/header.jsp" flush="true"/>

    <div id="o-header-2013">
        <div id="header-2013" style="display:none;"></div>
    </div>
    <!-- 下面的带 logo 的部分 -->
    <div id="nav">
        <div class="w">
            <!-- logo 部分 -->
            <div class="logo">
                <a href="#none" class="fore11"></a>
                <a href="#none" class="fore22">我的树懒</a>
                <a href="http://localhost:8080/shulanmiaosha/product/generalMerchandise.jsp" class="fore33" target="_blank">返回树懒首页</a>
            </div>

            <div class="language"><a class="wwwenzi1" target="_blank">好物尽在树懒商城</a></div>
<%--            <!--搜索部分-->--%>
<%--            <div id="search-2014">--%>
<%--                <ul class="hide" id="shelper"></ul>--%>
<%--                <div class="form">--%>
<%--                    <input type="text" class="text" id="key">--%>
<%--                    <button class="button cw_icon">--%>
<%--                        <i></i>--%>
<%--                        搜索--%>
<%--                    </button>--%>
<%--                </div>--%>
<%--            </div>--%>
            <!-- 我的购物车部分样式 -->
            <div class="nav-r zidingyiright">
                <div id="settleup-2014" class="dorpdown">
                    <a class="cart-href" href="${pageContext.request.contextPath}/customer/login.jsp">
                        <%--            <a class="cart-href" href="" target="_blank">--%>

                        <div class="cw_icon">
                            <i class="ci-left"></i>
                            <i class="ci_right">></i>
                            <span class="gocart">我的购物车</span>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="head1">

        <ul class="select">
            <li class="select-list">
                <dl id="select1">
                    <dt>热门品牌</dt>
                    <dd class="select-all selected"><a href="javascript:void(0)">全部</a></dd>
                    <dd><a href="javascript:void(0)">Apple</a></dd>
                    <dd><a href="javascript:void(0)">华为</a></dd>
                    <dd><a href="javascript:void(0)">三星</a></dd>
                    <dd><a href="javascript:void(0)">Vivo</a></dd>
                    <dd><a href="javascript:void(0)">Oppo</a></dd>
                    <dd><a href="javascript:void(0)">小米</a></dd>
                    <dd><a href="javascript:void(0)">Honor</a></dd>
                    <dd><a href="javascript:void(0)">魅族</a></dd>
                    <dd><a href="javascript:void(0)">索尼</a></dd>
                    <dd><a href="javascript:void(0)">金立</a></dd>
                    <dd><a href="javascript:void(0)">Redmi</a></dd>
                    <dd><a href="javascript:void(0)">联想</a></dd>
                    <dd><a href="javascript:void(0)">黑鲨</a></dd>
                </dl>
            </li>
            <li class="select-list">
                <dl id="select2">
                    <dt>运行内存</dt>
                    <dd class="select-all selected"><a href="javascript:void(0)">全部</a></dd>
                    <dd><a href="javascript:void(0)">16GB</a></dd>
                    <dd><a href="javascript:void(0)">12GB</a></dd>
                    <dd><a href="javascript:void(0)">8GB</a></dd>
                    <dd><a href="javascript:void(0)">6GB</a></dd>
                    <dd><a href="javascript:void(0)">4GB</a></dd>
                    <dd><a href="javascript:void(0)">3GB</a></dd>
                    <dd><a href="javascript:void(0)">2GB</a></dd>
                    <dd><a href="javascript:void(0)">2GB以下</a></dd>

                </dl>
            </li>
            <li class="select-list">
                <dl id="select3">
                    <dt>机身储存</dt>
                    <dd class="select-all selected"><a href="javascript:void(0)">全部</a></dd>
                    <dd><a href="javascript:void(0)">1TB</a></dd>
                    <dd><a href="javascript:void(0)">512GB</a></dd>
                    <dd><a href="javascript:void(0)">256GB</a></dd>
                    <dd><a href="javascript:void(0)">128GB</a></dd>
                    <dd><a href="javascript:void(0)">64GB</a></dd>
                    <dd><a href="javascript:void(0)">32GB</a></dd>
                    <dd><a href="javascript:void(0)">32GB以下</a></dd>

                </dl>
            </li>
            <li class="select-list">
                <dl id="select4">
                    <dt>商品价格</dt>
                    <dd class="select-all selected"><a href="javascript:void(0)">全部</a></dd>
                    <dd><a href="javascript:void(0)">1000元以下</a></dd>
                    <dd><a href="javascript:void(0)">1001-1500元</a></dd>
                    <dd><a href="javascript:void(0)">1501-2000元</a></dd>
                    <dd><a href="javascript:void(0)">2001-3000元</a></dd>
                    <dd><a href="javascript:void(0)">3001-4000元</a></dd>
                    <dd><a href="javascript:void(0)">4001-5000元</a></dd>
                    <dd><a href="javascript:void(0)">5001-6000元</a></dd>
                    <dd><a href="javascript:void(0)">6001-7000元</a></dd>
                    <dd><a href="javascript:void(0)">7000元以上</a></dd>
                </dl>
            </li>

        </ul>

<%--        <button class="btn newBtn"></button>--%>

        <div class="main">

            <!--右边商品-->
            <div class="lc-col  lc-col--cols6-5 shangpinhezi">
                <div>
                    <div class="lc-goods-base">
                        <div class="lc-goods-base-main lc-goods-base-main--lg shoujishangpin">

                            <!--行中的第一个商品-->
<%--                                                        <a href="${pageContext.request.contextPath}/product/11">--%>
<%--                                                            <div class="goods-item-wrapper goods-item-wrapper--vertical goods-item-wrapper--cols6-1">--%>
<%--                                                                <div class="goods-item goods-item--nomargin" style="padding: 15px;">--%>
<%--                                                                    <div class="goods-item__cover" style="height: 160px;">--%>
<%--                                                                        <img class="goods-item__img" src="${pageContext.request.contextPath}/images/shoujishangpin01.webp" style="width: 160px; height: 160px;">--%>
<%--                                                                    </div>--%>
<%--                                                                    <div class="goods-item__info">--%>
<%--                                                                        <div class="goods-item__title goods-item__title--twoline" style="color: rgb(0, 0, 0);">Apple Watch SE 智能手表 GPS款 44毫米深空灰色铝金属表壳 黑色运动型表带MYDT2CH/A</div>--%>
<%--                                                                        <div class="goods-item__content">--%>
<%--                                                                            <div class="goods-item__price" style="color: rgb(240, 43, 43);">--%>
<%--                                                                                ￥--%>
<%--                                                                                2399.00--%>
<%--                                                                            </div>--%>
<%--                                                                            <div class="goods-item__fukuan"> 100+已付款</div>--%>
<%--                                                                        </div>--%>
<%--                                                                    </div>--%>
<%--                                                                </div>--%>
<%--                                                            </div>--%>
<%--                                                        </a>--%>


                        </div>
                    </div>
                </div>
            </div>


        </div>

        <div class="bottom-page">

        </div>

    </div>
</div>


<!--下方提示信息-->
<div id="cmsfooter">
    <div id="service-2017">
        <!-- 多快好省 -->
        <div class="w hhzidingyi">
            <ol class="slogen">
                <li class="item ">
                    <i>多</i>
                    品类齐全，轻松购物
                </li>
                <li class="item fore2">
                    <i>多</i>
                    多仓发货，极速配送
                </li>
                <li class="item fore3">
                    <i>好</i>
                    正品行货，精致服务
                </li>
                <li class="item fore4">
                    <i>省</i>
                    天天低价，畅选无忧
                </li>
            </ol>
        </div>
        <!--下面的信息-->
        <div class="shulan-help">
            <div class="w hhzidingyi">
                <div class="tishixinxi">
                    <span class="zititishixinxi">欢迎使用树懒商城，为您提供高质量的服务，是我们商城最高的追求！</span>
                </div>
            </div>
        </div>
    </div>
</div>
</div>


</div><!--  bg-->
<script>
    /*---------------------------ajax----------------*/
    // $(select-all).click(function (){
    //    getByPage(1);
    // });
    // $(document).ready(showProductList("全部", "全部", "全部", "全部", 1))

    showProductList("全部", "全部", "全部", "全部" ,1);
    var globalproName;
    var globalother1;
    var globalother2;
    var globalproPrice;
    var globalPageNum;

    function showProductList(proName, other1, other2, proPrice, pageNum) {
        globalproName = proName;
        globalother1 = other1;
        globalother2 = other2;
        globalproPrice = proPrice;
        globalPageNum = pageNum;
        var minPrice = 1.0;
        var maxPrice = 1.0;

        if (proName == "全部")
            proName = "-1";
        if (proName == "Apple")


            proName = "苹果";


        if (other1 == "全部")
            other1 = "-1";

        if (other2 == "全部")
            other2 = "-1"


        if (proPrice == "全部") {
            minPrice = -1;
            maxPrice = -1;
        } else if (proPrice == "1000元以下") {
            minPrice = 0;
            maxPrice = 1000;
        } else if (proPrice == "1001-1500元") {
            minPrice = 1001;
            maxPrice = 1500;
        } else if (proPrice == "1501-2000元") {
            minPrice = 1501;
            maxPrice = 2000;
        } else if (proPrice == "2001-3000元") {
            minPrice = 2001;
            maxPrice = 3000;
        } else if (proPrice == "3001-4000元") {
            minPrice = 3001;
            maxPrice = 4000;
        } else if (proPrice == "4001-5000元") {
            minPrice = 4001;
            maxPrice = 5000;
        } else if (proPrice == "5001-6000元") {
            minPrice = 5001;
            maxPrice = 6000;
        } else if (proPrice == "6001-7000元") {
            minPrice = 6001;
            maxPrice = 7000;
        } else if (proPrice == "7000元以上") {
            minPrice = 7000;
            maxPrice = -1;
        }


        // pageNum = parseInt(pageNum);
        var url = '${pageContext.request.contextPath}/products/conditions';
        $.get(url, {
                proName: proName,
                other1: other1,
                other2: other2,
                minPrice: minPrice,
                maxPrice: maxPrice,
                pageNum: pageNum
            },
            function (result) {
                $(".shoujishangpin").html("");
                $(".bottom-page").html("");
                console.log(JSON.stringify(result));
                if (result.code == 200) {  // 查询到数据
                    console.log("成功：" + result.code);
                    var proArr = result.data.list;
                    // console.log(proArr);
                    //
                    // console.log(proArr.length);
                    // console.log(proArr[0])

                    for (var i = 0; i < proArr.length; i++) {
                        var proDesc = proArr[i].proDesc;
                        var proPrice = proArr[i].proPrice;
                        var proImg = proArr[i].proImg;
                        var proId = proArr[i].proId;
                        var prodSell =proArr[i].prodSell;
                        // 获得到的数据渲染到页面中
                        // console.log("helloFor")
                        // console.log("proDesc:"+proDesc);
                        // console.log("proPrice:"+proPrice);
                        // console.log("proImg:"+proImg);
                        // console.log("proId:"+proId);
                        var LiEle =
                            '  <a href="${pageContext.request.contextPath}/product/11">\n' +
                            '                                <div class="goods-item-wrapper goods-item-wrapper--vertical goods-item-wrapper--cols6-1">\n' +
                            '                                    <div class="goods-item goods-item--nomargin" style="padding: 15px;">\n' +
                            '                                        <div class="goods-item__cover" style="height: 160px;">\n' +
                            '                                            <img class="goods-item__img" src="' + proArr[i].proImg + '" style="width: 160px; height: 160px;">\n' +
                            '                                        </div>\n' +
                            '                                        <div class="goods-item__info">\n' +
                            '                                            <div class="goods-item__title goods-item__title--twoline" style="color: rgb(0, 0, 0);">' + proDesc + '</div>\n' +
                            '                                            <div class="goods-item__content">\n' +
                            '                                                <div class="goods-item__price" style="color: rgb(240, 43, 43);">\n' +
                            '                                                    ￥\n' +
                            '                                                  ' + proPrice + '\n' +
                            '                                                </div>\n' +
                            '                                 <div class="goods-item__fukuan"> \n' +
                            '                                            ' + prodSell + '人已付款</div>\n' +
                            '                                            </div>\n' +
                            '                                        </div>\n' +
                            '                                    </div>\n' +
                            '                                </div>\n' +
                            '                            </a>';


                        $(".shoujishangpin").append(LiEle);

                    }
                } else {
                    console.log("失败：" + result.code);

                    $(".shoujishangpin").empty();
                }

                //2. 渲染页码信息
                // var pageNum = result.data.pageNum;
                var pages = result.data.pages;
                var prePage = result.data.prePage;
                var nextPage = result.data.nextPage;
                var hasPreviousPage = result.data.hasPreviousPage;
                var hasNextPage = result.data.hasNextPage;
                var total = result.data.total;
                var pageEle = "";
                $(".bottom-page span").text(total);

                // globalproName;
                // var  globalother1;
                // var  globalother2;
                // var globalproPrice;
                // var globalPageNum;
                pageEle += "                            当前第<span>" + pageNum + "</span>页\n";

                if (hasPreviousPage) {
                    pageEle += "                            <a  href=\"javascript:showProductList('" + globalproName + "','" + globalother1 + "',\n" +
                        "\t\t\t\t\t\t\t'" + globalother2 + "','" + globalproPrice + "'," + prePage + ")\"  >上一页</a>\n";
                }

                if (hasNextPage) {
                    pageEle += "                            <a href=\"javascript:showProductList('" + globalproName + "','" + globalother1 + "',\n" +
                        "\t\t\t\t\t\t\t'" + globalother2 + "','" + globalproPrice + "'," + nextPage + ")\">下一页</a>\n";
                }
                pageEle += '                            共有<span>' + pages + '</span>页\n';
                // pageEle += "                          共有<span>" + total + "</span>条数据\n";
                $(".bottom-ele span").text(pageEle);
                $(".bottom-page").append(pageEle);

            }
            , "json");

    };
</script>
<script src="../js/conditions.js"></script>

</body>
</html>